<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改系统公告')"/>
    <th:block th:include="include :: summernote-css"/>
</head>
<body style="background-color: #F4F6FA">
<div class="main-content" style="margin: 0;padding: 0">
    <form id="form-user-add" class="form-horizontal" th:object="${saffiche}" style="background-color: #F4F6FA">
        <div class="col-sm-12" style="display: flex;justify-content: center">
            <div class="col-sm-8 entering-page">
                <!--系统公告-->
                <div class="col-sm-12">
                    <!--标题、类别-->
                    <div class="form-group col-sm-12" style="margin-top:10px;">
                        <!--工单编号-->
                        <label class="col-sm-2 control-label entering-pd is-required">标题：</label>
                        <div class="col-sm-10">
                            <input th:field="${saffiche.ntcTitle}" placeholder="请输入公告标题" class="form-control"
                                   type="text"
                                   required="required">
                        </div>
                    </div>
                    <div class="form-group col-sm-12" style="margin-top:10px;">
                        <label class="col-sm-2 control-label entering-pd is-required">类别：</label>
                        <div class="col-sm-4">
                            <select name="sortCode" id="sortCode"
                                    th:with="ntcTypes=${@commonServiceImpl.findNtcTypes()}"
                                    onchange="dropChgSendTextOnly(this,'sortName');"
                                    class="form-control formSelect">
                                <th:block th:each="item : ${ntcTypes}">
                                    <option th:text="${item['CSText']}" th:value="${item['CSValue']}"
                                            th:selected="${item['CSValue'] == saffiche.sortCode}"></option>
                                </th:block>
                                <input type="hidden" th:field="*{sortName}" id="sortName"/>
                            </select>
                        </div>
                    </div>
                    <!--通知内容-->
                    <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label entering-pd">通知内容：</label>
                        <div class="col-sm-10">
                            <div class="ibox float-e-margins">
                                <div class="ibox-content no-padding">
                                    <textarea th:field="*{ntcContent}" class="summernote"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--来自、发布时间-->
                    <div class="form-group col-sm-12">
                        <!--来自-->
                        <label class="col-sm-2 control-label  entering-pd">来自：</label>
                        <div class="col-sm-4">
                            <input th:field="*{fromDept}" class="form-control " type="text"/>
                            <input type="hidden" th:field="*{issueUser}"/>
                        </div>
                        <!--发布时间-->
                        <label class="col-sm-2 control-label  entering-pd">发布时间：</label>
                        <div class="col-sm-4">
                            <input th:field="*{issueTime}" class="form-control " type="text"/>
                        </div>
                        <div class="input-group-append " style="position: absolute;top: 10px;right: 40px;">
                            <span class="glyphicon glyphicon-calendar "></span>
                        </div>
                    </div>
                    <input type="hidden" id="objRole" th:field="*{objRole}"/>
                    <!-- 备注-->
                    <div class="form-group col-sm-12">
                        <label class="col-xs-2 control-label entering-pd">备注：</label>
                        <div class="col-xs-10">
                            <input th:field="*{remark}" class="form-control " type="text"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 entering-page">
                <div class="form-group col-sm-12" style="margin-top:10px;">
                    <span style="font-width: bole; font-size: 20px;">评论</span>
                    <hr class="layui-border-black" style="margin-top: 5px"> <!--黑色分割线-->
                </div>
                <div class="form-group col-sm-12">
                    <div class="col-md-12 mb-3">
                        <input type="hidden" id="afficheId" th:value="${saffiche.afficheId}" />
                        <input type="hidden" id="parentCommentId" value="-1" />
                        <input type="text" class="form-control is-invalid" name="commentContent" id="commentContent" placeholder="请输入评论信息..." required>
                    </div>
                    <button class="btn btn-primary" type="button" style="margin: 10px 0 0 15px;" id="addComment">发表</button>
                </div>
                <div style="display: none;" id="reply-box">
                    <div class="col-md-12 mb-3">
                        <input type="text" class="form-control is-invalid" name="replyContent" id="replyContent" placeholder="" required>
                    </div>
                    <button class="btn btn-primary" type="button" style="margin: 10px 0 0 15px;" id="reply">回复</button>
                </div>
                <!--黑色分割线-->
                <div class="form-group col-sm-12">
                    <h5 class="page-header" style="margin:10px 0 10px 0"></h5>
                </div>
                <!--留言列表-->
                <div class="form-group col-sm-12" id="restore">
                    <div th:fragment="commentList" id="commentList">
                        <div class="comment row" th:each="comment : ${comment.rows}" id="comments">
                            <div class="content col-md-12">
                                <div class="author col-md-6" style="color: #B0B3B6">
                                    <small th:text="${comment.userName}">Matt</small>
                                    <span class="badge badge-pill badge-primary" th:if="comment.isBlogger == 1">楼主</span>
                                </div>
                                <div class="metadata  col-md-6 " style="color: #B0B3B6">
                                    <small class="date" th:text="${#dates.format(comment.editTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</small>
                                </div>
                                <div class="text col-md-8" th:text="${comment.commentContent}" style="color: black;">
                                    How artistic!
                                </div>
                                <div class="actions col-md-4">
                                    <a class="reply-comment layui-show layui-colla-title" href="javascript:void(0);" th:data-id="${comment.commentId}" th:data-name="${comment.userName}">回复</a>
                                    <a class="reply-cancel layui-show layui-colla-title" href="javascript:void(0);" style="display: none;">取消回复</a>
                                    <a class="delete" href="#" th:id="${comment.commentId}" onclick="deleteComment(this.id,this)">删除</a>
                                </div>
                            </div>
                            <!--子集评论-->
                            <div class="comments col-md-offset-1" th:if="${#arrays.length(comment.commentList)}>0">
                                <div class="comment" th:each="reply : ${comment.commentList}">
                                    <div class="content col-md-12">
                                        <div class="author col-md-6" style="color: #B0B3B6">
                                            <small th:text="${reply.userName}">小红</small>
                                            &nbsp;<small th:text="|回复 ${reply.replyTo}|" class="m-teal">回复 小白</small>
                                        </div>
                                        <div class="metadata col-md-5" style="color: #B0B3B6">
                                            <small class="date" th:text="${#dates.format(reply.editTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</small>
                                        </div>
                                        <div class="text col-md-9" th:text="${reply.commentContent}">
                                            How artistic!
                                        </div>
                                        <div class="actions col-md-3">
                                            <a class="delete" href="#" th:id="${reply.commentId}" onclick="deleteComment(this.id,this)">删除</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script th:src="@{/ajax/libs/layui/laydate.js}"></script>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: summernote-js"/>
<script>
    var prefix = "/system/mInterior/cfNotice";
    var id = '';

    $(document).ready(function () {
        var roleId = $("#objRole").val().toString();
        if (roleId == "-1") {
            document.getElementById("chkAll").checked = true;
        }

        $('.summernote').summernote({
            lang: 'zh-CN',
            tabsize: 2,
            height: 250, //高度
            toolbar: ['']
        });
    });
    laydate.render({
        elem: '#issueTime',
        type: 'datetime',
        trigger: 'click'
    });

    //发表评论
    $("#addComment").click(function (){
        var adata = {
            "afficheId": $("#afficheId").val(),
            "parentCommentId": $("#parentCommentId").val(),
            "commentContent": $("#commentContent").val(),
            "userId":"",
            "isBlogger":1,
            "isDel":0,
        }
        var data = JSON.stringify(adata);
        $.ajax({
            url: "/system/comment/addComment",
            data: data,
            contentType : "application/json",
            type: 'POST',
            success: function (data) {
                clearContent();
                $("#commentList").replaceWith(data);
            }
        })
    });

    //回复评论
    $("#commentList").on('click','.reply-comment',function () {
        $('#commentList .reply-cancel').hide();
        $('#commentList .reply-comment').show();
        let name = $(this).data('name');
        id = $(this).data('id');
        let replyBox = $('#reply-box');
        $(this).parent().parent().append(replyBox);
        replyBox.show();
        $("#replyContent").attr("placeholder","回复："+name).focus();
        $(this).hide();
        $(this).parent().find('.reply-cancel').show();
    }).on('click','.reply-cancel',function (){
        let replyBox = $('#reply-box');
        replyBox.hide();
        $(this).hide();
        $(this).parent().find('.reply-comment').show();
    }).on('click','#reply',function (){
        let adata = {
            "afficheId": $("#afficheId").val(),
            "parentCommentId": id,
            "commentContent": $("#replyContent").val(),
            "userId":"",
            "isBlogger":0,
            "isDel":0,
        }
        var data = JSON.stringify(adata);
        $.ajax({
            url: "/system/comment/addComment",
            data: data,
            contentType : "application/json",
            type: 'POST',
            success: function (data) {
                $('#commentList .reply-cancel').hide();
                $('#reply-box').hide();
                $('#commentList .reply-comment').show();
                $("#commentList").replaceWith(data);
                history.go(0);
            }
        })
    })

    //删除评论
    function deleteComment(commentId,event){
        layer.confirm('确认要删除该条评论吗?', {title:"删除确认"}, function (index){
            $.ajax({
                type:'DELETE',
                url:'/system/comment/deleteComment',
                data:{
                    commentId: commentId,
                    afficheId: $("#afficheId").val()
                },
                dataType:"JSON",
                success:function (data){
                    $("#commentList").replaceWith(data);
                }
            })
            layer.close(index);
            history.go(0);
        })

    }

    //提交成功后清理评论区内容
    function clearContent() {
        $("#parentCommentId").val(-1);
        $("#commentContent").val('');
    }
</script>
</body>
</html>

